import React, { useEffect, useState } from "react";
import axios from "axios";
import { Button, Col, Row, Pagination, Tag } from "antd";
import List from "../../components/list";
import { useNavigate } from "react-router-dom";
import "./style.scss";
import { throttle } from "lodash";
interface ListItem {
  productType:
    | "保时捷"
    | "奔驰"
    | "宝马"
    | "劳斯莱斯"
    | "法拉利"
    | "特斯拉"
    | "蔚来"
    | "比亚迪";
  id: string;
  price: number;
  url: string;
  date: string;
  type: "诚信818" | "会员商家" | "称新车" | "限时特惠" | "视频看车";
}

const typeList = [
  {
    name: "全部",
    type: "a",
  },
  {
    name: "诚信818",
    type: "b",
  },
  {
    name: "会员商家",
    type: "c",
  },
  {
    name: "称新车",
    type: "d",
  },
  {
    name: "限时特惠",
    type: "e",
  },
  {
    name: "视频看车",
    type: "f",
  },
];
const productTypeList = [
  "全部",
  "保时捷",
  "奔驰",
  "宝马",
  "劳斯莱斯",
  "法拉利",
  "特斯拉",
  "蔚来",
  "比亚迪",
];

// priceType = a  全部
// priceType = b  3-10
// priceType = c  10-30
// priceType = d  30-100
// priceType = e  100-150
// priceType = f  150-200
const priceTypeList = [
  {
    name: "全部",
    type: "a",
  },
  {
    name: "3-10万",
    type: "b",
  },
  {
    name: "10-30万",
    type: "c",
  },
  {
    name: "30-100万",
    type: "d",
  },
  {
    name: "100-150万",
    type: "e",
  },
  {
    name: "150-200万",
    type: "f",
  },
];

const descList = [
  {
    name: "默认排序",
    type: "a",
  },
  {
    name: "最新发布",
    type: "b",
  },
  {
    name: "价格降序",
    type: "c",
  },
];

const SelectCarList = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const navigate = useNavigate();

  const [productType, setProductType] = useState("全部");
  const [priceType, setPriceType] = useState("a");
  const [type, setType] = useState("a");
  const [desc, setDesc] = useState("a");

  const [total, setTotal] = useState(0);
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const fetchList = async () => {
    const resp = await axios.get("/api/list", {
      params: {
        productType,
        priceType,
        type,
        desc,
        pageCode,
        pageSize,
      },
    });
    setList(resp.data.data);
    setTotal(resp.data.total);
  };

  useEffect(() => {
    fetchList();
  }, [productType, priceType, type, desc, pageCode, pageSize]);

  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log("滚动了！！！");
    }, 200);

    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div>
      <div className="filter">
        <Row className="filter-item">
          <Col span={2}>品牌: </Col>
          <Col span={22}>
            {productTypeList.map((v, i) => {
              return (
                <Button
                  key={i}
                  type={productType === v ? "primary" : "default"}
                  onClick={() => setProductType(v)}
                >
                  {v}
                </Button>
              );
            })}
          </Col>
        </Row>
        <Row className="filter-item">
          <Col span={2}>价格: </Col>
          <Col span={22}>
            {priceTypeList.map((v, i) => {
              return (
                <Button
                  key={i}
                  type={priceType === v.type ? "primary" : "default"}
                  onClick={() => setPriceType(v.type)}
                >
                  {v.name}
                </Button>
              );
            })}
          </Col>
        </Row>
      </div>
      <div className="tab1">
        <div>
          <span>当前条件：</span>
          {productType !== "全部" && <Tag>{productType}</Tag>}
          {priceType !== "a" && (
            <Tag>{priceTypeList.find((v) => v.type === priceType)?.name}</Tag>
          )}
          <Button
            onClick={() => {
              setPriceType("a");
              setProductType("全部");
            }}
          >
            清空筛选
          </Button>
        </div>
      </div>
      <div className="tab">
        <div>
          {typeList.map((v, i) => {
            return (
              <span
                key={i}
                className={v.type === type ? "active" : ""}
                onClick={() => setType(v.type)}
              >
                {v.name}
              </span>
            );
          })}
        </div>
        <div>
          {descList.map((v, i) => {
            return (
              <span
                key={i}
                className={v.type === desc ? "active" : ""}
                onClick={() => setDesc(v.type)}
              >
                {v.name}
              </span>
            );
          })}
        </div>
      </div>
      <div className="table">
        {list.length > 0 ? (
          <div>
            <List>
              {list.map((v) => {
                return (
                  <List.ListItem
                    key={v.id}
                    {...v}
                    onClick={() => navigate("/car/detail/" + v.id)}
                  ></List.ListItem>
                );
              })}
            </List>
            <Pagination
              current={pageCode}
              total={total}
              pageSize={pageSize}
              onChange={(page, pageSize) => {
                setPageCode(page);
                setPageSize(pageSize);
              }}
            />
          </div>
        ) : (
          <div>很遗憾---数据为空！</div>
        )}
      </div>
    </div>
  );
};

export default SelectCarList;
